<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <button @click="inputFocusHandler">点击获取input框焦点</button>
    <br>
    <input type="text" ref="inputRef">
    


  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {


    //需求：  获取input框焦点（如何获取页面元素）
    // 1.给标签绑定ref属性
    // 2.在setup的retrun对象必须有  和input框上ref属性值一致的 名称
    const qwer = ref()

    const inputFocusHandler = () => {
      //拿到input元素，调用.focus聚焦
      console.log(qwer.value);
      qwer.value.focus()
    }
    
    return {
      inputFocusHandler,
      inputRef: qwer
    }
   
  }
}
</script>

<style scoped >

</style>